<template>
    <el-dialog v-dialog-drag :title="$t('AddCard')" :visible.sync="addCardDialog" width="30%"
               :before-close="handleAddCardClose">
        <el-form ref="cardForm" :model="card" :rules="rules" class="demo-ruleForm" label-width="80px">
            <el-form-item :label="$t('Picture')" prop="path" required>
                <el-col :span="11">
                     <el-input v-model="card.name"></el-input>
                </el-col>
                <el-col :span="11">
                    <div class="crop-demo-btn">{{$t('SelectChassis')}}
                        <!--<el-button type="primary" size="small">选择图片</el-button>-->
                        <input class="crop-input" type="file" ref="cardImg" name="image" accept="image/*"
                                @change="changeSelectCard"/>
                    </div>

                </el-col>

            </el-form-item>
            <el-form-item :label="$t('SlotNum')" prop="slotNum">

                <el-input v-model="card.slotNum"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitForm('cardForm')">{{$t('Confirm')}}</el-button>
            <el-button size="small" @click="handleAddCardClose">{{$t('Cancel')}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
    export default {
        props : {
            addCardDialog: false,
        },
        data: function () {
            return{
                card: {//将要添加的port
                    name:"",
                    path:"",
                    slotNum:"",
                    width:"",
                    height:""
                },
                rules: {
                    path: [{required: true, message:this.$t('Please_Select_Img')}],
                    slotNum: [{required: true, message: this.$t('Please_Input_SlotNum')}],
                }
            }


        },
        methods:{
            handleAddCardClose(done) {
                this.$parent.addCardDialog = false
            },
            changeSelectCard(e) {
                let vm = this;
                let file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return
                }
                let fileName = file.name;
                const reader = new FileReader();
                reader.onload = event => {
                    let img = new Image()
                    vm.card.path = event.target.result;
                    vm.card.name = fileName;
                    vm.$refs.cardImg.value = '';
                    img.src=vm.card.path;
                    img.onload = function () {
                        vm.card.width=img.width;
                        vm.card.height=img.height;
                    }
                }
                reader.readAsDataURL(file);
            },
            addCardImg() {
                let vm = this;
                vm.$parent.addImg(vm.$parent.cardGroup, vm.card.width, vm.card.height, vm.card.path, vm.card.name, 'card',vm.card.slotNum);
                vm.$parent.addCardDialog = false;
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addCardImg();
                    } else {
                        return false;
                    }
                });
            }

        },
        mounted() {
        }
    }
</script>

<style scoped>
    .crop-input {
        position: absolute;
        width: 90px;
        height: 30px;
        left: 0;
        top: 0;
        opacity: 0;
        cursor: pointer;
    }
    .crop-demo-btn {
        position: relative;
        width: 90px;
        height: 30px;
        line-height: 30px;
        padding: 0 20px;
        margin-left: 30px;
        background-color: #409eff;
        color: #fff;
        font-size: 12px;
        border-radius: 4px;
        box-sizing: border-box;
    }
</style>
